import React, { useState ,useEffect } from 'react';
import {FormOutlined ,ArrowLeftOutlined ,PlusOutlined} from '@ant-design/icons'
import {Divider ,Button ,Form ,Input ,Select ,notification } from 'antd'
import CustomTable from '../../../../components/ccl/CustomTable';
import './index.scss'
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../api/ccl'

const { Option } = Select;
const {Search} = Input
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 20 },
  };
  
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

const AddGoods = () => {
    const [form] = Form.useForm();
    const history = useNavigate()
    const [data,setData] = useState([])
   
    useEffect( () => {
        proList()
    },[])
    const proList = async() => {
        const res = await service.findpro({page:1,limit:10})
        if(res.data.code == 200){
            setData(res.data.data.records)
            console.log(res.data.data.records,111111);
            
        }
    }
    const onFinish = async(values: any) => {
        values.chooseVarchar = '销售A部门'  
        values.chooseTime = formattedDate
        const res = await service.addgoods(values)
        if(res.data.code == 200){
            notification.success({message:'新增成功',duration:2})
        }
       
    };
    var date = new Date()
    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date
    .getHours()
    .toString()
    .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date
    .getSeconds()
    .toString()
    .padStart(2, '0')}`;

    const onGenderChange = (value: string) => {
        
    };
    const onReset = () => {
        history(-1)
    };
    const onSearch = async (value: string) => {
        console.log(value);
        
        const res = await service.findcode({waybill:value,page:1,limit:10})
       if(res.data.code == 200){
        notification.success({message:'查询成功',duration:2})
        console.log(res.data.data);
        
        setData(res.data.data.records)
       }else{
        notification.error({message:'查询失败',duration:2})
       }        
    }

    const columns = [
        {
            title:'序号',
            key:'index',
            render:(_:any,__:any,index:any) =>index+1,
        },
        {
            title:'产品信息',
            key:'product',
            dataIndex: 'product',
        },
        {
            title:'产品名称',
            key:'productName',
            dataIndex: 'productName',
        },
        {
            title:'条码',
            key:'code',
            dataIndex: 'code',
        },
        {
            title:'客户',
            key:'customer',
            dataIndex: 'customer',
        },
        {
            title:'区域',
            key:'area',
            dataIndex: 'area',
        },
        {
            title:'成色',
            key:'quality',
            dataIndex: 'quality',
        },
        {
            title:'重量(g)',
            key:'weight',
            dataIndex: 'weight',
        },
        {
            title:'数量',
            key:'number',
            dataIndex: 'number',
        },
        {
            title:'克供费',
            key:'cost',
            dataIndex: 'cost',
        },
    ]
    let newData = data.map((item:any,index:any) => ({
        key:index,
        index:item.storeroomId,
        product:item.product,
        area:item.area,
        code:item.code,
        cost:item.cost,
        customer:item.customer,
        number:item.number,
        productName:item.productName,
        quality:item.quality,
        status:item.status,
        storeroom:item.storeroom,
        type:item.type,
        weight:item.weight

    }))
    return (
        <div className='addgoods'>
            <div className="header">
                <h3>新增选货单</h3>
                <div className="right">
                        <Button type="primary" htmlType="submit" >
                            <FormOutlined />提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            <ArrowLeftOutlined />取消
                        </Button>
                </div>    
            </div>
            {/* 分割线*/}
            <Divider />
            <h4>基本信息</h4>
            {/* 输入框 */}
            <Form
            {...layout}
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            >
                
                <Form.Item name="chooseCategory" style={{width:340}} label="品类：" rules={[{ required: true, message: '请输入内容' }]} >
                    <Input />
                </Form.Item>
                <Form.Item name="chooseListname" style={{width:340}} label="制单人：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="Time" style={{width:340}} label="制单时间：" >
                    <Input />
                </Form.Item>
                <Form.Item name="chooseWaybill" style={{width:340}} label="单号：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="chooseNum" style={{width:340}} label="数量：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="chooseWeight" style={{width:340}} label="重量：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Input />
                </Form.Item>

                <Form.Item name="chooseClient" style={{width:340}} label="客户：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Select
                    placeholder="请选择客户名称"
                    onChange={onGenderChange}
                    allowClear
                    >
                    <Option value="中国黄金">中国黄金</Option>
                    <Option value="老凤祥">老凤祥</Option>
                    <Option value="周大福">周大福</Option>
                    <Option value="盛峰黄金">盛峰黄金</Option>
                    <Option value="六福珠宝">六福珠宝</Option>
                    <Option value="着讯互联">着讯互联</Option>
                   
                    </Select>
                </Form.Item>
                <Form.Item name="chooseColor" style={{width:340}} label="成色：" rules={[{ required: true, message: '请输入内容' }]}>
                    <Select
                    placeholder="请选择成色"
                    onChange={onGenderChange}
                    allowClear
                    >
                    <Option value="千足金9999">千足金9999</Option>
                    <Option value="千足金9998">千足金9998</Option>
                    <Option value="千足金9997">千足金9997</Option>
                    <Option value="千足金9996">千足金9996</Option>
                   
                    </Select>
                </Form.Item>
                <Form.Item name="gender" style={{width:340}} label="区域："  rules={[{ required: true, message: '请输入内容' }]}>
                    <Select
                    placeholder="请选择区域"
                    onChange={onGenderChange}
                    allowClear
                    >
                    <Option value="华南地区深圳">华南地区深圳</Option>
                    <Option value="华南地区广东">华南地区广东</Option>
                    <Option value="华南地区福建">华南地区福建</Option>
                   
                    </Select>
                </Form.Item>
                <Form.Item name="chooseStatus" style={{width:340}} label="状态：" rules={[{ required: true, message: '请输入内容' }]} >
                    <Select
                    placeholder="请选择状态"
                    onChange={onGenderChange}
                    allowClear
                    >
                    <Option value="采购">采购</Option>
                    <Option value="入库">入库</Option>
                    <Option value="未采购">未采购</Option>
                   
                    </Select>
                </Form.Item>
               
            <br />
            <div className="table">
                <h4>产品信息</h4>
                <div className="right">
                    <Search
                    placeholder="请选择产品条码"
                    allowClear
                    enterButton="按条码搜索"
                    onSearch={onSearch}
                    />
                    <Button type="primary" htmlType='submit'><PlusOutlined />添加</Button>
                </div>
            </div>
 </Form>
            <CustomTable data={newData} columns={columns}/>
        </div>
    );
};

export default AddGoods;